<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <style>
      /* 移除 body 默认的外边距，并且统一行高 */
      body {
        margin: 0;
        line-height: 1.2;
      }
      /* 一般开发网页的时候，都是按照100%来开发 */
      html,
      body {
        height: 100%;
      }
      /* 统一采用盒子模式 */
      div {
        box-sizing: border-box;
      }
      .app {
        height: 100%;
      }
      .login {
        background-image: linear-gradient(to left top, #fbc2eb, #a6c1ee);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .login-main {
        border-radius: 5px;
        background-color: white;
        border: 1px solid #dedede;
        padding: 20px;
      }
      .login-title {
        margin: 0;
        color: #666;
      }
    </style>
  </head>
  <body>
    <div class="app login">
      <div class="login-main">
        <h1 class="login-title">自动化部署后台登录</h1>
      </div>
    </div>
  </body>
</html>
